<template>
  <el-tooltip
      :content="props.button!.tip"
      placement="right"
      :show-arrow="false"
      offset="0"
      :enterable="false"
  >
    <div class="bar-box" @click="check">
      <div class="tool-button-box"
           :style="{
              backgroundColor:props.button!.isOpen?theme.color.Tool.button.check:''
            }">
        <div class="tool-button">
          <el-icon>
            <component v-if="props.button!.icon!==''" :is="props.button!.icon" />
          </el-icon>
        </div>
      </div>
    </div>
  </el-tooltip>
</template>

<script setup lang="ts">

import {useLeftToolStore} from "../../../../store/leftTool.js";
import {type} from "../../../../model/type";
import {useThemeStore} from "../../../../store/theme";
import {ref} from "vue";

const props=defineProps({
    button:type.Tool,
    index:Number,
})

const tool=useLeftToolStore()
const theme=useThemeStore()
const h=ref(theme.color.Tool.button.hover)


function check(){
    if (props.button?.isOpen&&tool.leftShow){
        tool.UpdateShowStatus(props.index!,false)
        tool.LeftShow(false)
    }else {
        tool.UpdateShowStatus(props.index!,true)
        tool.LeftShow(true)
    }
}

</script>

<style scoped>
.bar-box{
    width: 100%;
    height: 30px;
    margin-top: 5px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.tool-button-box{
    width: 30px;
    height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 3px;
}
.tool-button{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.tool-button-box:hover{
    background-color: v-bind('theme.color.Tool.button.hover');
}
.tool-button:hover{
    color: v-bind('theme.color.Tool.button.icon');
}
</style>